<template>
  <div>
    <el-form ref="formRef" :model="form" label-width="120px">
      <el-form-item label="姓名">
        <el-input v-model="form.name"></el-input>
      </el-form-item>

      <el-form-item label="心愿">
        <el-input v-model="form.wish"></el-input>
      </el-form-item>

      <el-form-item label="目的地">
        <el-radio-group v-model="form.to">
          <el-radio label="西安"></el-radio>
          <el-radio label="昌平"></el-radio>
          <el-radio label="延庆"></el-radio>
          <el-radio label="顺义"></el-radio>
          <el-radio label="海淀"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="头像">
        <el-radio-group v-model="form.img">
          <el-radio
            label="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
          >
            <img
              width="40"
              height="40"
              src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
              alt=""
            />
          </el-radio>
          <el-radio
            label="https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg"
          >
            <img
              width="40"
              height="40"
              src="https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg"
              alt=""
            />
          </el-radio>
          <el-radio
            label="https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg"
          >
            <img
              width="40"
              height="40"
              src="https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg"
              alt=""
            />
          </el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="add">添加</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="list" @selection-change="select">
      <el-table-column type="selection" width="55" />
      <el-table-column fixed prop="name" label="姓名" width="150" />
      <el-table-column prop="wish" label="心愿" width="120" />
      <el-table-column prop="state" label="头像" width="120">
        <template #default="scope">
          <img :src="scope.row.img" width="40" height="40" alt="" />
        </template>
      </el-table-column>
      <el-table-column prop="time" label="时间" width="120">
        <template #default="scope">
          <span>{{ filtime(scope.row.time) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="to" label="目的地" width="120" />

      <el-table-column fixed="right" label="Operations" width="120">
        <template #default="scope">
          <el-button type="text" size="small" @click="open(scope.$index)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    西安：{{ $store.getters.num.numXian }} 昌平{{ $store.getters.num.numChang }}

    <el-button @click="remove">选中删除</el-button>
  </div>
</template>

<script>
import { ref, reactive, toRefs, computed } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import { ElMessageBox, ElMessage } from "element-plus";
//element-ui的确认弹框 要先引入才能用 因为他们是js方法
export default {
  setup(props, ctx) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const data = reactive({
      form: {
        name: "",
        wish: "",
        to: "",
        img: "",
      },

      selValue: [],
    });
    const add = () => {
      if (
        data.form.name == "" ||
        data.form.wish == "" ||
        data.form.to == "" ||
        data.form.img == ""
      ) {
        alert("不能为空");
        return false;
      }
      // 这里用|| 只要有一个为空就不能添加
      data.form.time = new Date();
      store.commit("add", data.form);
      data.form = {
        name: "",
        wish: "",
        to: "",
        img: "",
      };
      // 添加完成之后清空form
    };
    //添加方法

    const list = computed(() => {
      return store.state.list;
    });
    //

    const filtime = (val) => {
      return new Date(val).toLocaleString();
    };
    //用方法实现过滤器的效果

    const open = (index) => {
      ElMessageBox.confirm("确定删除吗", "Warning", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          store.commit("del", index);
          ElMessage({
            type: "success",
            message: "删除完成",
          });
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "取消删除",
          });
        });
    };
    //删除的弹框  then就是点击确定的时候根据下标执行删除

    const select = (val) => {
      console.log(val);
      data.selValue = val;
    };
    //复选框的事件

    const remove = () => {
      store.commit("remove", data.selValue);
      // selValue 代表复选框选中的值是一个数组
    };
    //选中删除

    return { ...toRefs(data), add, list, filtime, open, select, remove };
  },
};
</script>

<style lang="scss"></style>
